<template>
  <div class="BasicInfo">
    <div class="BasicInfo-left">
      <div class="left-tit-common t">
        <div class="aid">
          <img src="../../img/wardR/chest-icon.png" alt="请稍等">
          <span>{{information.belong_dpname}}</span>
        </div>
        <div class="bed">
          <span class="num">{{information.bed_no}}</span>
          <span class="bed-text">床</span>
        </div>
      </div>
      <div class="left-tit-common b">
        <div class="aid">
          <img src="../../img/wardR/date-icon.png" alt="请稍等">
          <span>当前系统日期</span>
        </div>
        <div class="date">
          <span class="ymd">
            <span>{{time.Year}}年</span>
            <span>{{time.Month}}月</span>
            <span>{{time.Day}}日</span>
          </span>
          <span class="hms">
            <span>{{time.Hours}}时</span>
            <span>{{time.Mininte}}分</span>
<!--            <span>{{time.Second}}秒</span>-->
          </span>
        </div>
      </div>
    </div>
    <div class="BasicInfo-right">
      <div class="BasicInfo-right-common">
        <div class="title-com">
          <span>病人信息</span>
        </div>
        <div class="patient-list">
          <div class="patient-list-col">
            <div>
              <span>姓名:</span>
              <span>{{information.pa_name}}</span>
            </div>
            <div>
              <span>性别:</span>
              <span>{{information.sex_name}}</span>
            </div>
            <div>
              <span>出生日期:</span>
              <span>{{information.birthday}}</span>
            </div>
          </div>
          <div class="patient-list-col">
            <div>
              <span>民族:</span>
              <span>{{information.nation_name}}</span>
            </div>
            <div>
              <span>住院号:</span>
              <span>{{information.case_number}}</span>
            </div>
          </div>
          <div class="patient-list-col">
            <div>
              <span>支付方式:</span>
              <span>{{information.fee_sourcename}}</span>
            </div>
            <div>
              <span>年龄 :</span>
              <span>{{information.in_days}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="BasicInfo-right-common">
        <div class="title-com con-tit">
          <span>联系信息</span>
        </div>
        <div class="patient-list">
          <div class="patient-list-col">
            <div>
              <span>家庭地址:</span>
              <span>{{information.address}}</span>
            </div>
            <div>
              <span>联系电话:</span>
              <span>{{information.phone}}</span>
            </div>
            <div>
              <span>联系人电话:</span>
              <span>{{information.rel_phone}}</span>
            </div>
          </div>
          <div class="patient-list-col">
            <div>
              <span>联系人姓名:</span>
              <span>{{information.rel_name}}</span>
            </div>
            <div>
              <span>与联系人关系:</span>
              <span>{{information.rel_con}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="BasicInfo-right-common">
        <div class="title-com dge-tit">
          <span>登记信息</span>
        </div>
        <div class="patient-list">
          <div class="patient-list-col">
            <div>
              <span>入院日期:</span>
              <span>{{information.in_date}}</span>
            </div>
            <div>
              <span>住院天数:</span>
              <span>{{information.in_days}}</span>
            </div>
            <div>
              <span>住院次数:</span>
              <span>{{information.in_time}}</span>
            </div>
          </div>
          <div class="patient-list-col">
            <div>
              <span>主管医生:</span>
              <span>{{information.doctor_name}}</span>
            </div>
            <div>
              <span>主管护士:</span>
              <span>{{information.nurse_name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import urls from '../../common.js'
export default {
  name: 'BasecInfo',
  data () {
    return {
      information: {},
      time: ''
    }
  },
  methods: {
    personHomeInfo () {
      console.log(this.$store.state.bedNo)
      axios.get(urls.personHomeInfo + '/' + this.$store.state.bedNo)
        .then((res) => {
          if (res.data.code === '200') {
            this.information = res.data.data
            sessionStorage.setItem('sliceBed', res.data.data.bed_no)
          }
        })
    },
    system () {
      setInterval(() => {
        this.time = {
          Year: new Date().getFullYear(),
          Month: new Date().getMonth() + 1,
          Day: new Date().getDate(),
          Hours: new Date().getHours(),
          Mininte: new Date().getMinutes()
          // Second: new Date().getSeconds()
        }
      }, 1000)
    }
  },
  mounted () {
    this.personHomeInfo()
    this.system()
  }
}
</script>

<style lang="stylus" scoped>
  .BasicInfo{
      display: flex;
      width: 100%;
      padding-bottom: .32rem;
    }
  .BasicInfo .BasicInfo-left{
    display: flex;
    flex-direction: column;
    margin-left: .3rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common{
    position: relative;
    border-radius: 0.1rem;
    width: 5.02rem;
    height: 4.12rem;
    color: #fff;
  }
  .BasicInfo .BasicInfo-left .left-tit-common.t{
    background: url(../../img/wardR/aid-bg.png);
    background-size: 100% 100%;
    margin-bottom: .2rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common.b{
    background: url(../../img/wardR/present-bg.png)
    background-size: 100% 100%;
    box-shadow: .1rem .1rem .3rem 0 #dcebf3;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .aid{
    display: flex;
    height: .84rem;
    align-items: center;
    // padding: .3rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .aid img{
    width: .38rem;
    height: .34rem;
    margin: 0 .3rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .aid span{
    font-size: .3rem;
    color: #fff;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .bed{
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "MicrocoftyYaHei";
  }
  .BasicInfo .BasicInfo-left .left-tit-common .bed .x{
    font-size: 1.45rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .bed .num{
    font-size: 1.2rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .bed .bed-text{
    font-size: 0.6rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .date{
    position: absolute;
    text-align: center;
    width: 100%;
    height: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .BasicInfo .BasicInfo-left .left-tit-common .date>span{
    display: block;
    font-size: .4rem;
    line-height: .55rem;
  }
  .BasicInfo .BasicInfo-left .left-tit-common .date>span>span{
    display: inline-block;
  }
  // 右侧病人信息
.BasicInfo .BasicInfo-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin:0 .3rem;
  }

.BasicInfo .BasicInfo-right .BasicInfo-right-common{
  background-color: #fff;
  padding: .1rem 0 .1rem .2rem;
  margin-bottom: 0.2rem;
  border-radius: 10px;
  box-shadow: 0px 0.11rem 0.24rem 0px rgba(127, 135, 143, 0.1);
}
.BasicInfo .BasicInfo-right .BasicInfo-right-common:last-child{
  margin-bottom: 0;
}

.BasicInfo .BasicInfo-right .title-com{
  height: .36rem;
  width: 1.45rem;
  font-size: 0.24rem;
  text-align: center;
  background-color: #e1f5f3;
  border-radius: .08rem;
  margin-bottom: .3rem;
  color: #27ae9e;
  line-height: .36rem;
  font-weight: bold;
}
.BasicInfo .BasicInfo-right .title-com.con-tit{
  background-color: #e6f0fa;
  color: #0d85da;
}
.BasicInfo .BasicInfo-right .title-com.dge-tit{
  background-color: #fca40a;
  color: #faf3de;
}
.BasicInfo .BasicInfo-right{
}

.BasicInfo .BasicInfo-right .patient-list{
  display: flex;
  padding-bottom: .2rem;
}
.BasicInfo .BasicInfo-right .patient-list-col{
  flex: 1;
  font-size: 0.24rem;
}
.BasicInfo .BasicInfo-right .patient-list-col>div:nth-child(2){
  margin: .36rem 0;
}
.BasicInfo .BasicInfo-right .patient-list-col>div>span:first-child{
  display: inline-block;
  width: 1.7rem;
  color: #7e92ab;
}
.BasicInfo .BasicInfo-right .patient-list-col>div>span:last-child{
  color: #161d26;
}

</style>
